<template>
  <el-container direction="vertical" style="height:100%">
    <el-header>Header</el-header>
    <el-main>
      <router-view/>
      <!-- <is-home></is-home> -->
    </el-main>
    <el-footer>
      <el-row :gutter="0" type="flex" justify="space-around">
        <el-col :span="5">
          <div class="grid-content bg-purple isys">
            <i class="iconfont icon-shouye"></i>
            <router-link to="/home"><span>首页</span></router-link>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content bg-purple isys">
            
              <i class="iconfont icon-xinpinzhuanqu "></i>
           
            <router-link to="/neaw"><span>最新</span></router-link>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content bg-purple isys">
            <i class="iconfont icon-remen"></i>
            <a href="javascript:;"><span>热门</span></a>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content bg-purple isys">
            <i class="iconfont icon-leimupinleifenleileibie2"></i>
            <router-link to="/class"><span>分类</span></router-link>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="grid-content bg-purple isys">
            
            <i class="iconfont icon-zhuanji"></i>
            <router-link to="/album"><span>专辑</span></router-link>
          </div>
        </el-col>
      </el-row>
    </el-footer>
  </el-container>
</template>

<script>
import isHome from "@/components/ishome/ishome.vue";
export default {
  components: {
    isHome
  }
};
</script>
<style>
/* 主题内容 */
.el-header,
.el-footer {
  background-color: #fff;
  color: #333;
  text-align: center;
  /* height: 76px !important; */
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  /* min-height:500px; */
  height: 100%;
}

/* 底部 */
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
/* 样式 */
.isys {
  display: flex;
  height: 100%;
  flex-direction: column;
  /* justify-content: center; */
  justify-content: center;
  align-items: center;
  /* align-content: center */
}
.el-col i {
  font-size: 40px;
}
.el-col span {
  font-size: 15px;
  font-weight: 700;
  color: #333;
  text-decoration: none;
}
a{
  text-decoration: none;
}
.el-col:hover i {
  color: orange;
}
.el-col:hover span {
  color: orange;
}
</style>
